<style lang="less" scoped>
  a{
    text-decoration: none;
    color:#000;
  }
  ul{
    font-size:1rem;
    li{
      height: 1.3rem;
      line-height: 1.3rem;
      &:hover{
        background-color: #80b5ea;
      }
    }
  }

  // 删除图标样式
  .dn{
    display: none;
    float: right;
    margin-right: 10px;
  }

  //li
  .pn{
    background-color: #f6f6f6;
    border:1px solid #e5e5e5;
    border-width: 1px 0;
    &:hover .dn{
      display: inline-block;
    }
  }

  .margin1rem{
    padding-left: 1rem;
  }

  .bgBlue{
    background-color: #409cf9;
    color: #fff;
  }

  .icon{
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
    font-size: 12px;
  }

  .add-child-btn{
    float: right;
    margin-right: 10px;
  }
</style>
<template>

  <div>
   <ul :pindex="index"  v-for="(item,index) in pageSet">
     <!--父节点-->
     <li v-if="item.pageName" class="pn">
      <a href="javascript:;" @dblclick.stop="updateParentNodeName" @blur.stop="updateParentFinal"  title="双击修改">{{ item.pageName }}</a>
      <span :pindex="index" class="dn" @click.stop="removeParent">
        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1955"><path d="M344.4593 791.382c15.4235 0 27.902-12.4795 27.902-27.902V456.558592c0-15.4225-12.4795-27.902-27.902-27.902-15.4225 0-27.902 12.4805-27.902 27.902v306.92249599999997C316.5573 778.9036 329.0368 791.382 344.4593 791.382zM511.872 791.382c15.4235 0 27.902-12.4795 27.902-27.902V456.558592c0-15.4225-12.4795-27.902-27.902-27.902s-27.902 12.4805-27.902 27.902v306.92249599999997C483.969 778.9036 496.4485 791.382 511.872 791.382zM679.2837 791.382c15.4235 0 27.902-12.4795 27.902-27.902V456.558592c0-15.4225-12.4795-27.902-27.902-27.902s-27.902 12.4805-27.902 27.902v306.92249599999997C651.3818 778.9036 663.8602 791.382 679.2837 791.382zM818.7935 149.6361H703.2340479999999c-12.4795-48.0113-55.8039-83.7059-107.6572-83.7059H428.16512000000006c-51.8533 0-95.1777 35.6946-107.6572 83.7059H204.949504c-61.5526 0-111.6078 50.0828-111.6078 111.6078v27.902976h27.901952v27.901952h55.803904v530.138112c0 61.526 50.0552 111.6078 111.6078 111.6078h446.432256c61.5547 0 111.6078-50.0818 111.6078-111.6078V317.047808h55.803904v-27.901952h27.901952v-27.902976C930.4013 199.7179 880.3482 149.6361 818.7935 149.6361zM428.1651 121.7341h167.411712c20.5445 0 38.3652 11.308 48.0389 27.902H380.12723200000005C389.801 133.0422 407.6206 121.7341 428.1651 121.7341zM790.8915 847.1859c0 30.7896-25.0399 55.8039-55.8039 55.8039H288.65536000000003c-30.763 0-59.6726-25.0143-59.6726-55.8039l3.8687-530.1381h558.040064V847.1859199999999zM149.1446 261.2439c0-30.7896 25.0419-55.8039 55.8039-55.8039H818.793472c30.7651 0 55.8039 25.0143 55.8039 55.8039H149.144576z" p-id="1956"></path></svg>
      </span>
      <span class="add-child-btn" @click="showShade" title="添加子节点">
        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1265"><path d="M1024 448 576 448 576 0 448 0 448 448 0 448 0 576 448 576 448 1024 576 1024 576 576 1024 576Z" p-id="1266"></path></svg>
      </span>
     </li>
     <!--子节点-->
     <template v-if = "item.children.length > 0">
        <li :cindex="cindex" v-for="(value,cindex) in item.children" class="margin1rem" title="双击修改">
          <a href="javascript:;" @dblclick.stop="updateNodeName" @blur.stop="updateFinal">{{ value.pageName }}</a>
          <span :cindex="cindex" class="dn" @click.stop="removeChild">
            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1955"><path d="M344.4593 791.382c15.4235 0 27.902-12.4795 27.902-27.902V456.558592c0-15.4225-12.4795-27.902-27.902-27.902-15.4225 0-27.902 12.4805-27.902 27.902v306.92249599999997C316.5573 778.9036 329.0368 791.382 344.4593 791.382zM511.872 791.382c15.4235 0 27.902-12.4795 27.902-27.902V456.558592c0-15.4225-12.4795-27.902-27.902-27.902s-27.902 12.4805-27.902 27.902v306.92249599999997C483.969 778.9036 496.4485 791.382 511.872 791.382zM679.2837 791.382c15.4235 0 27.902-12.4795 27.902-27.902V456.558592c0-15.4225-12.4795-27.902-27.902-27.902s-27.902 12.4805-27.902 27.902v306.92249599999997C651.3818 778.9036 663.8602 791.382 679.2837 791.382zM818.7935 149.6361H703.2340479999999c-12.4795-48.0113-55.8039-83.7059-107.6572-83.7059H428.16512000000006c-51.8533 0-95.1777 35.6946-107.6572 83.7059H204.949504c-61.5526 0-111.6078 50.0828-111.6078 111.6078v27.902976h27.901952v27.901952h55.803904v530.138112c0 61.526 50.0552 111.6078 111.6078 111.6078h446.432256c61.5547 0 111.6078-50.0818 111.6078-111.6078V317.047808h55.803904v-27.901952h27.901952v-27.902976C930.4013 199.7179 880.3482 149.6361 818.7935 149.6361zM428.1651 121.7341h167.411712c20.5445 0 38.3652 11.308 48.0389 27.902H380.12723200000005C389.801 133.0422 407.6206 121.7341 428.1651 121.7341zM790.8915 847.1859c0 30.7896-25.0399 55.8039-55.8039 55.8039H288.65536000000003c-30.763 0-59.6726-25.0143-59.6726-55.8039l3.8687-530.1381h558.040064V847.1859199999999zM149.1446 261.2439c0-30.7896 25.0419-55.8039 55.8039-55.8039H818.793472c30.7651 0 55.8039 25.0143 55.8039 55.8039H149.144576z" p-id="1956"></path></svg>
          </span>
        </li>
    </template>
   </ul>

  </div>

</template>
<script>

export default{
  name: 'list',
  props: {
    pageSet:{
      type:Array
    },
    index:{
      type:Number
    }
  },
  methods: {
    showShade(e){
      this.$store.dispatch('showShade',{
        state:true,
        class:"子节点",
        pindex:e.currentTarget.parentNode.parentNode.getAttribute('pindex')
      });
    },
    //双击父修改
    updateParentNodeName(e){
      this.$store.dispatch('operateParentIndex',{
          pindex:e.target.parentNode.parentNode.getAttribute('pindex')
      });
      e.target.setAttribute("contenteditable","true") ;
    },
    //失焦父节点修改成功
    updateParentFinal(e){
      e.target.setAttribute("contenteditable","false") ;
      let finalText = e.target.innerText;

      this.$store.dispatch('updateParentNode',{
          childname:finalText
      });
    },
    //双击子修改
    updateNodeName(e){
      //标记现在操作的子节点 以及父节点
      //debugger
      this.$store.dispatch('operateChildIndex',{
          pindex:e.target.parentNode.parentNode.getAttribute('pindex'),
          cindex:e.target.parentNode.getAttribute('cindex')
      });

      e.target.setAttribute("contenteditable","true") ;
      e.target.parentNode.className += ' bgBlue';
    },
    //失焦子节点修改成功
    updateFinal(e){
      
      e.target.setAttribute("contenteditable","false") ;
      e.target.parentNode.className = "margin1rem";
      let finalText = e.target.innerText;

      this.$store.dispatch('updateChildNode',{
          childname:finalText
      });
    },
    //删除父节点
    removeParent(e){
      this.$store.dispatch('removeParentNode',{
          pindex:e.currentTarget.getAttribute('pindex')
      });
    },
    //删除子节点
    removeChild(e){
      this.$store.dispatch('removeParentNode',{
          pindex:e.currentTarget.parentNode.parentNode.getAttribute('pindex'),
          cindex:e.currentTarget.getAttribute('cindex')
      });
    }
  }
}

</script>